<template>
  <div>
    <br>
    <!-- 搜索条件 -->
    <el-row>
      <el-col :span="3">
        <template>
          <el-input placeholder="请输入结算单id" v-model="id" clearable>
          </el-input>
        </template>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sno" filterable placeholder="请选择选货单编号" clearable>
          <el-option v-for="item in snoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="type" filterable placeholder="请选择结算单类型" clearable>
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="customer" placeholder="请选择客户名称" clearable filterable>
          <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <br>
    <!-- 第二行 -->
    <el-row>
      <el-col :span="4">
        <el-select v-model="creator" placeholder="制单人" clearable filterable>
          <el-option v-for="item in creatorList" :key="item.account" :label="item.account" :value="item.account">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="selectTime()" value-format="yyyy-MM-dd" :clearable="true">
        </el-date-picker>
      </el-col>

      <el-col :span="4">
        <el-select v-model="state" filterable placeholder="请选择结算表状态" clearable>
          <el-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="showInfo()" size="small">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="exportTable()" icon="el-icon-upload" size="small">导出当前页</el-button>
      </el-col>
    </el-row>
    <br>
    <!-- 表数据 -->
    <el-row>
      <template>
        <el-table :data="saleMoneyList" tooltip-effect="dark" style="width: 97%" class="table1">
          <el-table-column label="序号" width="45" align="center" type="index">
          </el-table-column>
          <el-table-column prop="id" label="id" width="40" align="center">
          </el-table-column>
<<<<<<< HEAD
          <el-table-column prop="sno" label="选货单编号" width="180" align="center">
=======
          <el-table-column prop="sno" label="选货单编号" width="165" align="center">
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
          </el-table-column>
          <el-table-column prop="depotId" label="仓库编号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="50" align="center">
          </el-table-column>
          <el-table-column prop="customer" label="客户" width="100" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="付款金额" width="95" align="center">
          </el-table-column>
<<<<<<< HEAD
          <el-table-column prop="creator" label="制单人" width="75" align="center">
=======
          <el-table-column prop="creator" label="制单人" width="80" align="center">
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="80" align="center">
          </el-table-column>
          <el-table-column prop="operatorTime" label="操作时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="70" align="center">
          </el-table-column>
          <el-table-column prop="allPrice" label="选货单总价" width="100" align="center">
          </el-table-column>
<<<<<<< HEAD
          <el-table-column label="操作" width="217" align="center">
=======
          <el-table-column label="操作" width="220" align="center">
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
            <template slot-scope="scope">
              <el-button type="success" size="mini" v-if="scope.row.state == '未提交'"
                @click="sunmitSaleMoney(scope.row)">提交</el-button>
              <el-button type="success" size="mini" v-if="scope.row.state == '未提交'"
                @click="updateSaleMoney(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" v-if="scope.row.state == '未提交'"
                @click="delSaleMoney(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>

    <!-- 修改框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="金额结算表id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" :placeholder="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="付款金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off" :placeholder="form.money"></el-input>
        </el-form-item>
        <el-form-item label="类型" label-width="110px">
          <el-select v-model="form.type" filterable :placeholder="form.type" clearable style="width: 480px;">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate(form)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-row>
      <template>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="prev, pager, next, jumper, sizes, total"
            :total="total">
          </el-pagination>
        </div>
      </template>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里放数据
      id: '',//结算单id
      sno: '',
      snoList: [],
      type: '',
      typeList: [
        { id: 1, name: '定金' },
        { id: 2, name: '尾款' },
      ],
      customer: '',
      customerList: [],
      creator: '',
      creatorList: [],
      time: [],
      startTime: '',
      endTime: '',
      state: '',
      stateList: [
        { id: 0, name: '未提交' },
        { id: 1, name: '已提交' },
        { id: 2, name: '已完成' },
      ],
      current: 1,
      size: 10,
      total: 0,
      saleMoneyList: [],
      totalPrice: 0,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        id: 0,
        money: 0,
        type: ""
      }
    }
  },
  methods: {
    download: function (data,fileName) {
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)

      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(url);
    },
    exportTable:function(){
      let data = {
        id: this.id,
        sno: this.sno,
        type: this.type,
        customer: this.customer,
        creator: this.creator,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        current: this.current,
        size: this.size,
      }
      this.$axios.post("saleMoney/exportSaleMoney", data, { responseType: 'blob' }).then(res => {

        let exportFlag = res.headers['exportflag'];
        if(exportFlag == false){
          this.$message.error("导出失败");
          return;
        }

        let contentDisposition = res.headers['content-disposition'];
        if (contentDisposition) {
          var fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
          console.log(fileName);
        }

        this.download(res.data,fileName)
      })
    },
    updateSaleMoney: function (scope) {
      this.dialogFormVisible = true;
      this.form.type = scope.type;
      this.form.money = scope.totalPrice;
      this.form.id = scope.id;
    },
    confirmUpdate: function (form) {
      let data = {
        id: form.id,
        type: form.type,
        totalPrice: form.money
      }
      console.log(data);

      this.$axios.post("saleMoney/updateSaleMoney", data).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message.success("修改成功!")
        } else {
          this.$message.error("修改失败:" + res.data.message)
        }
<<<<<<< HEAD
        this.dialogFormVisible = false;
        this.getCurrentPageData();
=======
        window.location.reload();
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
      })
    },
    sunmitSaleMoney: function (scope) {
      this.$confirm('一经提交不可更改,确定提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(scope.id);
        let data = {
          id: scope.id
        }
        this.$axios.post("saleMoney/submitSaleMoney", data).then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("提交成功!")
          } else {
            this.$message.error("提交失败:" + res.data.message)
          }
<<<<<<< HEAD
          //window.location.reload();
          this.getCurrentPageData();
=======
          window.location.reload();
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });
      });
    },
    delSaleMoney: function (scope) {
      console.log(scope.$index);
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("saleMoney/del/" + scope.row.id).then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("删除成功!")
            this.saleMoneyList.splice(scope.$index, 1)
          } else {
            this.$message.error("删除失败:" + res.data.message)
          }
          this.getCurrentPageData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //分页函数
    handleSizeChange(val) {
      //页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCurrentPageData();
    },
    handleCurrentChange(val) {
      //页码修改时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.current = val;
      //发请求获取数据
      this.getCurrentPageData();
    },
    getCurrentPageData: function () {
      this.showInfo()
    },
    showInfo: function () {
      let data = {
        id: this.id,
        sno: this.sno,
        type: this.type,
        customer: this.customer,
        creator: this.creator,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        current: this.current,
        size: this.size,
      }
      console.log(data);
      this.$axios.post("saleMoney/moneyInfo", data).then(res => {
        console.log(res.data);
        this.saleMoneyList = res.data.data.data;
        this.total = res.data.data.total;
        this.size = res.data.data.size;
      })
    },
    findAllConsumer: function () {
      this.$axios.get("businessCompetitor/getName").then(res => {
        this.customerList = res.data.data;
      })
    },
    selectTime: function () {
      if (!this.time) {
        this.time = []
      }
      console.log(this.time);
      this.startTime = this.time[0];
      this.endTime = this.time[1];
    },
    findAllAccount: function () {
      this.$axios.get("user/findAllAccount").then(res => {
        console.log("-------------");
        console.log(res.data.data);
        this.creatorList = res.data.data;
      })
    },
    findAllSno: function () {
      this.$axios.get("saleOrder/findAllSno").then(res => {
        if (res.data.code == 200) {
          this.snoList = res.data.data;
          console.log(res.data.data);
        }
      })
    }
  },
  mounted: function () {
    this.findAllSno();
    this.findAllConsumer();
    this.findAllAccount();
    this.showInfo();
  }
}
</script>

<style scoped>
.first {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}

.block {
  text-align: center;
}

.el-table,.el-table th,.el-table td{
  border: 5px inset rgb(186, 216, 242);
}

.el-table{
  margin-left: 20px;
}

.el-table th{
  background-color: rgb(186, 216, 242);
}

.el-table td, .el-table th{
  padding: 5px 0;
}

.el-table .cell{
  padding: 0;
}

.el-table .cell{
  padding: 0;
}
</style>